<template>
  <div class="home-page">
    <section>
      <img src="../assets/callout.svg" alt="callout" />
      <h2>随心写作，自由表达</h2>
      <div class="to-write">
        <a href="#" class="btn">开始写文章</a>
      </div>
    </section>

    <h4>发现精彩</h4>
    <ColumnList :list="list"></ColumnList>
    <button v-if="!isLastPage" @click="loadMorePage">加载更多</button>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from "vue";
import ColumnList from "../components/ColumnList.vue";
import { useColumnStore } from "../store/column";
import useLoadMore from "../hooks/useLoadMore";

const columnStore = useColumnStore();
const total = computed(() => columnStore.total);
const currentPage = computed(() => columnStore.currentPage);

onMounted(() => {
  columnStore.fetchColumns({ pageSize: 3 });
});

const list = computed(() => columnStore.getColumns);

const { loadMorePage, isLastPage } = useLoadMore(columnStore, "fetchColumns", {
  total,
  currentPage,
  pageSize: 3,
});
</script>

<style scoped>
.home-page {
  width: 1320px;
  margin: 0 auto 50px;

  section {
    padding: 48px 0;

    img {
      width: 300px;
    }

    h2 {
      margin-bottom: 8px;
      font-weight: normal;
      font-size: 32px;
    }

    .to-write {
      display: flex;
      justify-content: center;
      margin-bottom: 16px;

      a {
        margin: 8px 0;
        background-color: #0d6efd;
        border-color: #0d6efd;
        color: #fff;
      }
    }
  }
}
</style>
